<template>
  <el-container>
    <el-header>
      <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        background-color="#545c64"
        text-color="#fff"
        active-text-color="#ffd04b"
        @select="handleSelect"
      >
        <el-menu-item style="float: left;font-size: 30px">
          <el-avatar shape="square" :size="50" src="https://images.cnblogs.com/cnblogs_com/zeyfra/1871834/o_19a35456.png" /><font color="#41B883"> 泽塔</font>  <font>程序设计竞赛团队平台</font>
        </el-menu-item>
        <el-menu-item>
          <el-button type="primary" plain size="mini" icon="el-icon-user-solid" @click="handleLogin">登录</el-button>
        </el-menu-item>
        <el-menu-item index="5"><a href="https://www.ele.me" target="_blank">一个菜单</a></el-menu-item>

        <el-submenu index="4" style="float: right">
          <template slot="title">OJ</template>
          <el-menu-item index="4-1" style="float: none"><a href="https://www.nowcoder.com/exam/oj" target="_blank">牛客网</a></el-menu-item>
          <el-menu-item index="4-2" style="float: none"><a href="https://www.acwing.com/" target="_blank">ACWing</a></el-menu-item>
          <el-menu-item index="4-3" style="float: none"><a href="http://codeforces.com/" target="_blank">CodeForces</a></el-menu-item>
        </el-submenu>
        <el-menu-item index="3">我要刷题</el-menu-item>
        <el-menu-item index="2">公告</el-menu-item>
        <el-menu-item index="1">首页</el-menu-item>
      </el-menu>
    </el-header>
    <el-main style="heght:95%">
      <div id="welcome">
        <canvas id="welcomeCanvas" />
      </div>
      <div load-Script ng-src="../js/welcome.js" />
    </el-main>
    <el-footer>
      <el-footer>Copyright &copy;2020-2022 by ZeyFra</el-footer>
    </el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      activeIndex2: '1',
      username: '你好，请登录'
    }
  },
  mounted() {
    // 设备宽度
    var q = document.getElementById('welcomeCanvas')
    var w = document.body.clientWidth | document.documentElement.clientWidth
    var h = document.body.clientHeight | document.documentElement.clientHeight
    q.height = h - 95
    q.width = w
    var width = q.width
    var height = q.height
    var yPositions = Array(300).join(0).split('')
    var ctx = q.getContext('2d')
    var draw = function() {
      ctx.fillStyle = 'rgba(0,0,0,.05)'
      ctx.fillRect(0, 0, width, height)
      ctx.fillStyle = 'green'/* 代码颜色 */
      ctx.font = '10pt Georgia'
      yPositions.map(function(y, index) {
        var text = String.fromCharCode(1e2 + Math.random() * 330)
        var x = (index * 10) + 10
        q.getContext('2d').fillText(text, x, y)
        if (y > Math.random() * 1e4) {
          yPositions[index] = 0
        } else {
          yPositions[index] = y + 10
        }
      })
    }
    function RunMatrix() {
      setInterval(draw, 30)
    }
    RunMatrix()
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
      var name
      if (key === '2') {
        name = 'Inform'
      } else if (key === '3') {
        name = 'Problem'
      }
      this.$router.push({
        name,
        params: {
        }
      })
    },
    handleLogin() {
      this.$router.push({
        name: 'Login'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.el-footer {
    color: rgb(0, 0, 0);
    text-align: center;
    line-height: 60px;
    margin-top: auto;
    margin-bottom: 10px;
  }
.el-menu {
  .el-menu-item {
    float: right;
  }
}
</style>
<style>
#welcome {
	overflow: hidden;
	background: black;
}

canvas {
	margin: 0;
}
</style>
